<template>
  <el-container style="height: 100vh">
    <el-aside :width="width" v-if="schema.showAside !== false" class="aside">
      <Menu
        @select="menuSelect"
        class="menu"
        mode="vertical"
        :schema="{ type: 'menu', menus: pages }"
        :collapse="isCollapse"
      />
      <el-link class="toggle" @click="isCollapse = !isCollapse">
        <el-icon v-if="!isCollapse"><DArrowLeft /></el-icon>
        <el-icon v-else><DArrowRight /></el-icon>
      </el-link>
    </el-aside>
    <el-container>
      <el-header v-if="schema.showHeader !== false">Header</el-header>
      <el-main>
        <router-view :key="$route.fullPath"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Menu from './menu.vue'
import { useRouter, useRoute } from 'vue-router'
import { handleApi } from '../../common/api'
import { getCurrentInstance, computed, ref } from 'vue'

defineOptions({ name: 'AppCom' })

const instance = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const props = defineProps({
  schema: {
    type: Object,
    required: true
  }
})

const isCollapse = ref(true)

const width = computed(() => {
  if (!isCollapse.value) {
    return '200px'
  }
  return '40px'
})

console.log('props.schema', props);
const { pages } = props.schema

const pageObj = unfoldPages(pages)
resolverRoutes(pageObj)

function unfoldPages(pages, config) {
  if (!config) {
    config = {}
  }
  pages.forEach((page) => {
    if (page.url) {
      config[page.url] = page
    }
    if (page.children && page.children.length) {
      unfoldPages(page.children, config)
    }
  })
  return config
}

function menuSelect(index) {
  pushRouter(index)
}

function pushRouter(path) {
  if (typeof path === 'object') {
    router.push(path)
    return
  }
  const page = pageObj[path]
  if (page) {
    if (page.schema && typeof page.schema === 'function') {
      page.schema().then((res) => {
        router.addRoute({
          path: path,
          component: () => import('../../LowCode.vue'),
          props: {
            schema: res.default
          }
        })
        setTimeout(() => {
          router.push(path)
        }, 0)
      })
    } else if (page.schemaApi) {
      handleApi(page.schemaApi, instance).then((data) => {
        router.addRoute({
          path: path,
          component: () => import('../../LowCode.vue'),
          props: {
            schema: JSON.parse(data)
          }
        })
        setTimeout(() => {
          router.push(path)
        }, 0)
      })
    } else {
      router.push(path)
    }
  }
}

function resolverRoutes(pageObj) {
  for (const key in pageObj) {
    const page = pageObj[key]
    const routeConfig = {
      path: page.url
    }

    if (page.component) {
      routeConfig.component = page.component
      router.addRoute(routeConfig)
    } else if (page.schema) {
      if (typeof page.schema !== 'function') {
        routeConfig.component = () => import('../../LowCode.vue')
        routeConfig.props = {
          schema: page.schema
        }
        router.addRoute(routeConfig)
      }
    }
  }
  setTimeout(() => {
    console.log('route', route)
    pushRouter({
      path: route.path,
      params: route.params,
      query: route.query
    })
  }, 0)
}
</script>
<style lang="scss" scoped>
.aside {
  position: relative;
  display: flex;
  .menu {
    width: 100%;
  }
  .toggle {
    position: absolute;
    // width: 20px;
    top: 50%;
    right: 0;
  }
}
</style>
